import { useState } from "react";

function Son({ onGetSonMsg }) { // 2.从props中解构获取传递的方法
  // 子组件中的数据
  const sonMsg = "我是子组件的数据";
  return (
    <>
      this is Son
      {/*3.调用父组件的方法并传递实参 */}
      <button onClick={() => onGetSonMsg(sonMsg)}>点我向父组件传递数据</button>
    </>
  );
}

function App() {
  // 子组件的数据
  const [msg, setMsg] = useState("");
  // 用于获取子组件传递数据的函数
  const getMsg = (val) => {
    // 4.存储子组件传递的数据并驱动视图更新
    setMsg(val);
  };
  return (
    <>
      {/* 1.将父组件中的方法传递给子组件 */}
      {/* 注意：如果传递的为函数以 on开头+函数名 */}
      <Son onGetSonMsg={getMsg}>this is App</Son>
      <div>子组件传递的数据:{msg}</div>
    </>
  );
}

export default App;
